<template>
    <div class="box">
        <div>
            <img src="../../assets/images/logo.png" @click='changeSide'/>
        </div>
        <div class='header-right'>
            <div class="title">
                我是xxx管理系统
            </div>
            <div class="user">
                <el-dropdown trigger="click" @command="handleCommand">
                    <span class="el-dropdown-link">
                        <img class="user-logo" src="../../assets/images/user.jpg"/>
                        <span class="user-logo-name">{{username}}</span>
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="changPassword">修改密码</el-dropdown-item>
                        <el-dropdown-item command="loginout">退出</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
    </div>
    
</template>

<script>
import bus from './eventBus'
export default {
    data(){
        return {}
    },
    computed:{
        username(){
            let username=localStorage.getItem('username');
            return username? username : '管理员';
        }
    },
    methods: {
        handleCommand(command){
            if(command=='loginout'){
                localStorage.removeItem('username');
                this.$router.push('/login');
            }else if(command='changPassword'){
                alert("修改密码")
            }
        },
        changeSide(){
            bus.$emit('changeSide');
        }
    }
}
</script>
<style scoped>
.box{
    display: flex;
    flex-direction: row;
}
.header-right{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    align-items: center;
}
.header-right .title{
    font-size: 30px;
    padding-left: 20px;
    color:aliceblue;
}

.header-right .user{
    margin-right: 40px;
    
}

.header-right .user .user-logo-name{
    color:aliceblue;
    font-size: 20px;
}

.header-right .user .user-logo{
    border-radius: 50%;
    width: 40px;
    height: 40px;
}
</style>

